<template>
  <a-drawer v-if="visible" :append-to-body="true" :width="540" :visible="visible" :closable="false"
    @cancel="closeDrawer()" @ok="save()" ok-text="保存">
    <template #title>
      <EditableText :value="flowNodeConfig.name" @change="onNodeNameChange" />
    </template>
  </a-drawer>
</template>
<script setup>
import useApp from "@/hooks";
const { $ } = useApp();
import ArrayUtil from "../common/ArrayUtil";
import Snowflake from "../common/Snowflake";
import { NODE } from "../common/FlowConstant";
import { IconDelete, IconSwap, IconPlus } from "@arco-design/web-vue/es/icon";
import EditableText from "@/components/common/EditableText.vue";
const visible = ref(false)
$.on(NODE.AUTO_DECSION + '-drawer-open', config => {
  flowNodeConfig.value = config;
  visible.value = true;
})
let flowNodeConfig = ref({});
// 编辑节点名称
const onNodeNameChange = (name) => {
  flowNodeConfig.value.name = name; 
  save(false);
};

const save = (leave = true) => {
  leave && closeDrawer();
};

const closeDrawer = () => {
  visible.value = false;
};

</script>

<style lang="less" scoped></style>